import React from "react";
import "./TodoMain.css";
import { useSelector } from "react-redux";

export default function TodoMain() {
  //获取状态值 任务列表
  let todos = useSelector((state) => state.todo);

  return (
    <ul className="todo-main">
      {todos.map((item) => {
        return (
          <li key={item.id}>
            <label>
              <input type="checkbox" checked={item.done} onChange={() => {}} />
              &nbsp;
              <span className={item.done ? "done" : null}>{item.title}</span>
            </label>
            <button className="btn btn-danger">删除</button>
          </li>
        );
      })}

    </ul>
  );
}
